<template>
	<view>
		<view class="w-100 h110 bg-white circle54 f-b-c show0" >
			<view class="w-25 h110 f-c-c font28 ty-li" v-for="(item,index) in list" :key="item.code">
				<view class="fs-n-c font24 t-8" v-if="item.code != 5"  @click="get_list(item)">
					<view class="w-100 f-c-c" :class="list_id == item.code?'t-0 font600':''">{{item.title}}</view>
					<view class="w-100 f-c-c" :class="list_id == item.code?'t-0 font600':''">{{item.name}}</view>
				</view>
				<view v-else @click="openDatetimePicker">
					<view class="fs-n-c font24 t-8"  v-if="item.name">
						<view class="w-100 f-c-c" :class="list_id == item.code?'t-0 font600':''">{{item.title}}</view>
						<view class="w-100 f-c-c" :class="list_id == item.code?'t-0 font600':''">{{item.name}}</view>
					</view>
					<view v-else>
						<view class="f-c-c">
							<image src="../../../static/icon_work_shop_time.png" class="w48 h44"/>
						</view>
						<view class="f-c-c">
							<image src="../../../static/icon_right.png" class="w18 h30" style="transform: rotate(90deg);"/>
						</view>
					</view>
				</view>
			</view>
		
		</view>
		<SimpleDateTimePicker
		     ref="myPicker"
		     @submit="handleSubmit"
		     :start-year="2012"
		     :end-year="2030"
		   />
	</view>
</template>

<script>
	import Time from "../../../common/time.js"
	import SimpleDateTimePicker from "uni_modules/buuug7-simple-datetime-picker/components/buuug7-simple-datetime-picker/buuug7-simple-datetime-picker.vue";
	export default{
		mixins:[Time],
		props:{
			list:{},
			list_id:{}
		},
		components:{SimpleDateTimePicker},
		data(){
			return{
				birthday:""
			}
		},
		methods:{
			get_list(val){
				this.$emit('get_change',val)
			},
			 // 打开picker
			openDatetimePicker() {
			  this.$refs.myPicker.show();
			},
		
			// 关闭picker
			closeDatetimePicker() {
			  this.$refs.myPicker.hide();
			},
		
			handleSubmit(e) {
			  // {year: "2019", month: "07", day: "17", hour: "15", minute: "21"}
			  console.log(e);
			  this.birthday = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`;
			  let dates = new Date(`${e.year}-${e.month}-${e.day}`)
			  let data = {
				  name: `${e.month}-${e.day}`,
				  title: this.get_day(dates.getDay()),
				  time: `${e.year}${e.month}${e.day}`,
				  date: `${e.year}-${e.month}-${e.day}`
			  }
			  this.$emit("get_other",data)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.ty-li{
		position: relative;
		&::after{
			content: '';
			width: 1rpx;
			height: 46rpx;
			background: #DFDFDF;
			top: 32rpx;
			position: absolute;
			right: 0;
		}
		&:last-child{
			&::after{
				width: 0;
			}
		}
	}
</style>
